<template>
	<view class="content">
		<view class="back">
			<image class="img" src="https://yj.xiesinder.cn/prophet/back/jwgl.jpg" mode="scaleToFill" lazy-load="true"></image>
		</view>
		<view class="container">
			<!--头部返回-->
			<view class="con-title">
				<u-icon label="回到首页" @click="toIndex" labelPos="right" labelSize="18px" size="24px" name="arrow-left-double"></u-icon>
			</view>
			<!--放置组件-->
			<view class="con-body">
				<new-jwgl v-if="userInfo.isBindJwgl"></new-jwgl>
				<my-jwgl v-else></my-jwgl>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import { myJwgl } from "@/page_my/components/my-jwgl/my-jwgl.vue"
	import { newJwgl } from "@/page_my/components/new-jwgl/new-jwgl.vue"
	export default {
		components: { myJwgl, newJwgl },
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		computed: {
			...mapState('user', ['openId', 'userInfo'])
		},
		methods: {
			// 回到首页
			toIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F8F8F8;
	}
	
	.content {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		position: relative;
		
		// 背景
		.back {
			width: 100%;
			height: 400rpx;
			position: absolute;
			z-index: 2;
			.img {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 400rpx;
			}
		}
		
		.container {
			position: fixed; // 相对于浏览器
			z-index: 3;
			margin-top: 370rpx;
			width: 100%;
			height: 100%;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			
			.con-title {
				width: 100%;
				padding: 30rpx 0 30rpx 30rpx;
			}
			
			.con-body {
				width: 90%;
				padding: 30rpx 5% 30rpx 5%;
			}
		}
	}
</style>